<template>
  <div class="app-container" style="padding:1vh 2vw">
    <div class="tab-container" style="margin: 6vh 2vw;">
      <el-table
        :data="recordsList"
        :size="handleSize()"
        tooltip-effect="light"
        style="width: 100%;"
        max-height="800"
        highlight-current-row
      >
        <el-table-column prop="title" label="标题" show-overflow-tooltip max-width="400" min-width="200" />
        <el-table-column label="审核人" sortable max-width="200" min-width="100" align="center">
          <template v-slot="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>学号: {{ scope.row.adminNumber }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="rank" label="审核等级" max-width="200" min-width="100" align="center"/>
        <el-table-column prop="data" label="操作" max-width="200" min-width="100" align="center"/>
      </el-table>

      <el-row style="display: flex;justify-content: center;margin-top: 5vh">
        <el-col :xs="18" :sm="12" :md="12" :lg="8" :xl="6" style="display: flex;justify-content: center">
          <el-pagination
            v-show="total>0"
            background
            hide-on-single-page
            :current-page.sync="currentPage"
            :page-size="perPage"
            :pager-count="5"
            layout="prev, pager, next"
            @prev-click="change"
            @next-click="change"
            @current-change="change"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { indexActivityAdminRecord } from '@/api/admin/activityAdmin'
import { itemActivity } from '@/api/user/activity'
import { itemAdmin } from '@/api/admin/admin'

export default {
  data() {
    return {
      currentPage: 1,
      lastPage: 0,
      total: 0,
      perPage: 12,
      recordsList: [],
    }
  },
  created() {
    // 从服务器获取 审核记录
    this.currentPage = 1
    this.getAuditRecords()
  },
  methods: {
    async getAuditRecords() {
      const res = await indexActivityAdminRecord({page: this.currentPage})
      let recordsList = res.data.data
      for (const recordsListKey in recordsList) {
        // 获取活动标题
        const resActivity = await itemActivity({id: recordsList[recordsListKey].activity_id})
        recordsList[recordsListKey]['title'] = resActivity.data.title

        // 获取审核人信息
        const resAdmin = await itemAdmin({id: recordsList[recordsListKey].number})
        recordsList[recordsListKey]['name'] = resAdmin.data.name
        recordsList[recordsListKey]['adminNumber'] = resAdmin.data.number
      }

      this.recordsList = recordsList
      this.currentPage = res.data.currentPage
      this.lastPage = res.data.lastPage
      this.total = res.data.total
      this.perPage = res.data.perPage
    },
    // 返回设备类别
    device() {
      return this.$store.state.app.device
    },
    // 根据设备类型控制尺寸
    handleSize() {
      return this.$store.state.app.device === 'mobile' ? 'mini' : 'medium'
    },
    // 换页
    change(e) {
      this.currentPage = e;
      this.getActivities();
    },
  }
}
</script>

<style scoped lang="scss">
.app-container {
  //margin: 30px 2rem;
  //border-radius: 15px;
  //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  .tab-container {
    //margin: 30px 1.4rem;
  }
}
</style>

<!--{-->
<!--id: 1,-->
<!--title: '科技创新展示',-->
<!--name: '张三',-->
<!--number: '2019001',-->
<!--college: '计算机学院',-->
<!--rank: 1-->
<!--}, {-->
<!--id: 2,-->
<!--title: '科技创新展示',-->
<!--name: '李四',-->
<!--number: '2019002',-->
<!--college: '大数据学院',-->
<!--rank: 2-->
<!--}-->
